import Nav from "components/Nav"
import styled from "styled-components"
import PieChart from '../components/PieChart';
import LineChart from '../components/LineChart';
import useMoney from '../useMoney';
import HistoryMoney from "components/HistoryMoney";
import {useState} from 'react';
require('../assets/icons/logo.svg')

const Wrapper=styled.div`
    display:flex;
    flex-direction:column;
    height:100vh;
    
`
const Main=styled.div`
    flex-grow:1;
    overflow:auto;
    background:white;
    >.pie,.line{
        width:100vw;
        display:flex;
        justify-content: center;
        margin-top:50px;
    }
    >.history-wrapper{
        padding:10px;
        margin-top:20px;
        >.history{
            background-color: rgba(235, 231, 231, 0.5);
            display:flex;
            justify-content: center;
            align-items:center;
            padding:10px 10px;
        }

    }
    
  
` 
const Statistics = () =>{
    const {getMoney}=useMoney()
    let money=getMoney()
    const[toggle,setToggle]=useState(false)
    const toggleBool=(a:boolean)=>{
        return !a 
    }
    return (
        <Wrapper>
            <Main>
                <div className="pie">
                    <PieChart  money={money}></PieChart>
                </div>
                <div className="line">
                    <LineChart money={money}></LineChart>
                </div>
                <div className="history-wrapper">
                    <div className="history" onClick={()=>{setToggle(toggleBool(toggle))}}>历史记录</div>
                    {toggle?<HistoryMoney onChange={()=>{ setToggle(false) }} money={money}/>:null }
                    
                </div>
            </Main>
            <Nav></Nav>
        </Wrapper>
    )
}

export default Statistics